<template>
  <div class="company-block">
    <div class="detail-wrap">
      <img class="avatar" :src="`${$baseImgUrl}company/letter_block01.jpg`"/>
      <div class="content">
        <div class="title-wrap">
          <router-link tag="b" :to="'/company/' + 1" class="title">凯发娱乐</router-link>
          <span v-if="true" class="huobo huobo-certification"/>
          <span v-if="true" class="huobo huobo-protect"/>
        </div>
        <p class="plat-wrap">
          平台：
          <span
            v-for="(plat, index) in company.plats"
            :key="index"
          >
            {{plat}}
          </span>
        </p>
        <p>保障：海博认证担保500万</p>
        <div class="rate">
          <div>综合得分：</div>
          <div>
            <rate
              :rate="9.3"
              :perRate="2"
              rateTemplate="value分"
            ></rate>
          </div>
        </div>
      </div>
    </div>
    <div class="index-wrap">
      <van-row>
        <van-col :span="12">
          <company-index name="网站指数" :score="9.7" activeBarColor="#03d4a5"></company-index>
        </van-col>
        <van-col :span="12">
          <company-index name="网站指数" :score="9.7" activeBarColor="#03d4a5"></company-index>
        </van-col>
        <van-col :span="12">
          <company-index name="网站指数" :score="9.7" activeBarColor="#03d4a5"></company-index>
        </van-col>
        <van-col :span="12">
          <company-index name="网站指数" :score="9.7" activeBarColor="#03d4a5"></company-index>
        </van-col>
        <van-col :span="12">
          <company-index name="网站指数" :score="9.7" activeBarColor="#03d4a5"></company-index>
        </van-col>
      </van-row>
    </div>
    <van-tabs
      type="card"
      swipeable
      color="#00a895"
    >
      <van-tab title="公司简介" class="introduction">
        <van-row :gutter="5">
          <van-col :span="15" class="description">
            <div class="content">
              琅缳山，绝云崖，沧云大陆四大极恶之地之首。绝云崖下被称作死神的墓地，
              无数年间，坠下绝云崖者不计其数，其中甚至有三个力量通天的天王级强者，
              却从未有人得以生还。此时，绝云崖边，一块两人高的巨石侧，倚着一个黑发黑眸的青年男子，
              他全身浴血，一身黑衣之上裂开着数不清的创口，他在这里仅仅站了几个呼吸的时间，
              脚下便已汇集一小滩血流。他的胸口剧烈起伏，口中喘息粗重的吓人，
              全身每个部位的肌肉都在轻微的哆嗦……彰显着他已是彻底力竭，几近油尽灯枯，
              若不是身侧的这块巨石，他或许连站立都无法做到。但，他的一双眼睛却冷醒的如两把寒刃，
              没有丝毫涣散的痕迹，射出着恶狼般的凶光，嘴角，微勾着极尽嘲讽、不屑的冷笑。他的前方，
              黑压压的人群堵死了他所有的逃生之路。“云澈，你已经走投无路了！乖乖把天毒珠交出来，我们或许可以饶你不死！”
            </div>
            <span class="detail">查看详细>></span>
          </van-col>
          <van-col :span="9" class="img">
            <img :src="`${$baseImgUrl}company/letter_block01.jpg`"/>
          </van-col>
        </van-row>
      </van-tab>
      <van-tab title="基本信息"></van-tab>
    </van-tabs>
  </div>
</template>

<script>
import CompanyIndex from './Index.vue';
import Rate from '../../../components/Rate.vue';

export default {
  name: 'CompanyBlock',
  props: {
    company: {
      type: Object,
      default() {
        return {
          img: '',
          title: '',
          isGuarantee: true,
          isCertification: true,
          plats: ['AG', 'MG', 'EA', 'BBIN', '沙巴', 'HG', 'TTG', '1', '2'],
          security: '',
          synthesisScore: 3.6
        };
      }
    }
  },
  data() {
    return {};
  },
  components: {
    CompanyIndex,
    Rate
  }
};
</script>

<style lang="less" scoped>
  @import '../../../less/global.less';
  .company-block {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid #ddd;
    background-color: #fff;
    .detail-wrap {
      display: flex;
      .avatar {
        flex: 0 0 120px;
        width: 120px;
        height: 120px;
      }
      .content {
        margin-left: 1rem;
        .title-wrap {
          * {
            vertical-align: middle;
          }
          .title {
            margin-right: 10px;
            font-size: 18px;
            font-weight: bold;
            color: #333;
            cursor: pointer;
          }
          span {
            display: inline-block;
            margin-right: 1rem;
            font-size: 2rem;
          }
        }
        .plat-wrap {
          max-width: 18rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        p {
          line-height: 30px;
          color: #666;
        }
        .rate {
          display: flex;
          align-items: center;
          color: #666;
        }
      }
    }
    .index-wrap {
      margin-top: 20px;
    }
    .tab-pane-wrap {
      height: 177px;
    }
    .introduction {
      margin-top: 1rem;
      .description {
        color: #666;
        .content {
          margin-bottom: 6px;
          line-height: 20px;
          max-height: 12rem;
          overflow: hidden;
        }
        .detail {
          cursor: pointer;
          color: @mainBgColor;
          &:hover {
            color: @mainBgHoverColor;
          }
        }
      }
      img {
        width: 100%;
      }
    }
  }
  .company-block /deep/ .van-tabs--border-card {
    border: 0;
    box-shadow: none;
  }
</style>
